<template>
<div class="m">
    <!-- Form -->
    <el-form ref="forms" :model="forms" label-width="100px" style="width: 100%;">
        <el-form-item label="设备名称" prop="name">
            <el-input v-model="forms.name" style="width: 30%;"></el-input>
        </el-form-item>

        <el-form-item label="设备序列号" prop="serial">
            <el-input v-model="forms.serial" style="width: 30%;"></el-input>
        </el-form-item>

        <el-row type="flex" class justify="start">
            <el-col :span="5">
                <el-form-item label="经度">
                    <el-input v-model="forms.longittude" value autocomplete="off" style="width: 110px;"></el-input>
                </el-form-item>
            </el-col>

            <el-col :span="5">
                <el-form-item label="纬度">
                    <el-input v-model="forms.latitude" value autocomplete="off" label-width="20px" style="width: 110px;"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-upload class="upload-demo" ref="upload" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="uploadSuccess" action="./action/upload" :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取插件文件</el-button>
        </el-upload>

        <el-form-item label="活动时间" prop="time">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy.MM.dd" v-model="forms.time" style="width: 65%;"></el-date-picker>
            </el-col>
        </el-form-item>

        <el-form-item label="设备状态" prop="status">
            <el-select v-model="forms.status" style="width: 30%;">
                <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
        </el-form-item>

        <el-row type="flex" class justify="start">
            <el-col :span="5.05">
                <el-form-item label="设备类型" prop="type">
                    <el-select v-model="forms.type" style="width: 110px;">
                        <el-option v-for="item in types" :key="item.type" :label="item.name" :value="item.type"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>

            <el-col :span="5">
                <el-form-item label="接口类型" prop="media">
                    <el-select v-model="forms.media" style="width: 110px;">
                        <el-option v-for="item in medias" :key="item.type" :label="item.name" :value="item.type"></el-option>
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>

        <el-form-item label="注释note" prop="note">
            <el-input type="textarea" rows="2" v-model="forms.note" style="width: 30%;"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button size="medium" type="primary" @click="onSubmit">立即添加</el-button>
            <el-button size="medium" type="warning" @click="resetForm('forms')">重置</el-button>
        </el-form-item>
    </el-form>
</div>
<!-- <h1 style="position: absolute; bottom: 3%; right: 5%;"> 10511工作室&nbsp;版权所有</h1> -->
</template>

<script>
//引入mapState
import Qs from "qs";
export default {
    data() {
        return {
            forms: {
                name: "",
                serial: "",
                longittude: "",
                latitude: "",
                plugm: "",
                status: "",
                time: "",
                media: "",
                note: ""
            },
            dialogFormVisible: true,
            formLabelWidth: "200px",
            options: [{
                    id: 0,
                    label: "离线"
                },
                {
                    id: 1,
                    label: "在线"
                },
                {
                    id: 2,
                    label: "禁用"
                }
            ],
        };
    },

    computed: {
        medias: function () {
            return this.$store.state.media_info;
        },
        types: function () {
            return this.$store.state.type_info;
        },
    },
    watch: {
        medias: function (newVal, oldVal) {
            return oldVal;
        },
        types: function (newVal, oldVal) {
            return oldVal;
        }
    },
    methods: {
        uploadSuccess(res, file, fileList){
            this.forms.plugm=file.name;
            console.log(file.name)
        },
        submitUpload() {
            this.$refs.upload.submit();
        },
        handleRemove(file, fileList) {
            console.log(file.name);
        },
        handlePreview(file) {
            console.log(file);
        },
        //确定添加后，向后台发起请求
        onSubmit() {
            console.log(this.forms);
            let Time;
            Time = this.forms.time.split(".");
            var Resulttime = Time.join("");
            this.$refs.upload.submit();

            Object.assign(this.forms, {
                oper: "5",
                time: Resulttime
            });
            this.$refs.upload.submit();
            this.$axios({
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                },
                method: "post",
                transformRequest: [
                    function (data) {
                        // 对 data 进行任意转换处理
                        return Qs.stringify(data);
                    }
                ],
                url: "./action/device_man",
                data: this.forms
            }).then(res => {
                if (res.data) {
                    this.$store.dispatch("GET_DEVICEINFO");
                    alert("添加成功！");
                }
            });
        },
        resetForm(formName) {
            console.log("触发重置!");
            try {
                this.$refs[formName].resetFields();
            } catch (error) {
                console.log(error);
            }
        }
    }
};
</script>

<style scoped>
.el-upload-list__item-name {
    border: 1px solid grey;
}

.el-input__inner {
    border: sandybrown;
}

.upload-demo {
    margin-left: 20px;
}

.el-button .el-button--primary .el-button--small {
    float: left;
}

.el-upload-list__item is-ready {
    width: 50%;
}

.el-upload-list__item {
    display: block;
    width: 200px;
    float: left;
}

.el-col-5 {
    width: 160px;
    height: 40px;
}

.m {
    margin-left: 200px;
    margin-top: 20px;
}

.el-select .el-input__inner {
    width: 100px;
}

.el-input {
    width: 150px;
}

.top {
    height: 40px;
    background-color: aqua;
    line-height: 40px;
    text-align: center;
    padding: 20px;
}

h1 {
    display: block;
    float: left;
    margin-left: 10%;
}

.el-select {
    display: block;
    float: left;
    line-height: 40px;
    width: 150px;
    height: 40px;
}

.el-pagination {
    display: block;
}

.el-table .warning-row {
    background: oldlace;
    text-align: center;
}

.el-table .success-row {
    background: #f0f9eb;
    text-align: center;
}

.el-row {
    margin-bottom: 20px;
}

.el-col {
    border-radius: 4px;
}
</style>
